<template>
  <view class="order-container">
    <!-- 订单状态选项卡 -->
    <view class="tabs">
      <view
        class="tab"
        :class="{ active: currentTab === 'all' }"
        @click="switchTab('all')"
      >
        全部
      </view>
      <view
        class="tab"
        :class="{ active: currentTab === 'pending' }"
        @click="switchTab('pending')"
      >
        待支付
      </view>
      <view
        class="tab"
        :class="{ active: currentTab === 'completed' }"
        @click="switchTab('completed')"
      >
        已完成
      </view>
      <view
        class="tab"
        :class="{ active: currentTab === 'cancelled' }"
        @click="switchTab('cancelled')"
      >
        已取消
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <text class="order-number">订单号：P2024112610352583</text>
      <text class="order-status">待支付</text>
    </view>

    <!-- 系统赠送权益 -->
    <view class="benefits">
      <text class="benefits-title">系统赠送</text>
      <view class="benefits-list">
        <view class="benefit-item">
          <text class="benefit-count">50</text>
          <text class="benefit-name">发布职位</text>
        </view>
        <view class="benefit-item">
          <text class="benefit-count">50</text>
          <text class="benefit-name">查看简历</text>
        </view>
        <view class="benefit-item">
          <text class="benefit-count">50</text>
          <text class="benefit-name">邀请面试</text>
        </view>
        <view class="benefit-item">
          <text class="benefit-count">50</text>
          <text class="benefit-name">刷新职位</text>
        </view>
      </view>
    </view>

    <!-- 订单金额和操作按钮 -->
    <view class="order-actions">
      <text class="order-amount">￥0.00</text>
      <button class="action-button cancel" @click="cancelOrder">取消订单</button>
      <button class="action-button pay" @click="payOrder">立即支付</button>
    </view>

    <!-- 没有更多 -->
    <view class="no-more">
      <text>~没有更多~</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: "all", // 当前选中的订单状态选项卡
    };
  },
  methods: {
    // 切换订单状态选项卡
    switchTab(tab) {
      this.currentTab = tab;
    },
    // 取消订单
    cancelOrder() {
      uni.showToast({
        title: "取消订单",
        icon: "none",
      });
      // 这里可以添加取消订单的逻辑
    },
    // 立即支付
    payOrder() {
      uni.showToast({
        title: "立即支付",
        icon: "none",
      });
      // 这里可以添加支付订单的逻辑
    },
  },
};
</script>

<<<<<<< HEAD
=======
>>>>>>> feature-branch
=======

>>>>>>> feature-branch
<style scoped>
.order-container {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 订单状态选项卡 */
.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.tab {
  font-size: 13px;
  color: #666;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab.active {
  color: #000;
  border-bottom-color: #2F318B;
}

/* 订单信息 */
.order-card {
  padding: 20px;
  border-radius: 5px;
  background: #F6F6FD;
}

.order-info {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.order-number {
  color: #A4A4A4;
  font-size: 12px;
  margin-bottom: 10px;
}

.order-status {
  font-size: 14px;
  color: #ff4d4f;
}

/* 系统赠送权益 */
.benefits {
  margin-bottom: 20px;
}

.benefits-title {
  font-size: 12px;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

.benefits-list {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-radius: 5px;
  background: #ECECFF;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefit-count {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.benefit-name {
  font-size: 12px;
  color: #666;
}

/* 订单金额和操作按钮 */
.order-actions {
  display: flex;
  justify-content: space-between; /* 金额靠左，按钮靠右 */
  align-items: center;
  margin-bottom: 20px;
}

.order-amount {
  font-size: 15px;
  color: #ED3232;
  flex: 1; /* 金额占据剩余空间 */
  margin-right: 10px; /* 金额和按钮之间的间距 */
}

.action-button {
  width: 80px; /* 增加按钮宽度，确保文字显示完整 */
  height: 25px;
  text-align: center;
  border-radius: 21px;
  font-size: 9px;
  margin-left: 10px; /* 按钮之间的间距 */
}

.action-button::after {
  border: none;
}

.action-button.cancel {
  background-color: #fff;
  color: #000;
  background: #D9D9D9;
}

.action-button.pay {
  color: #fff;
  background: linear-gradient(180deg, #9E9EFF 0%, #CCCCFE 100%);
}

/* 没有更多 */
.no-more {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-top: 20px;
}
</style>